<%--
  Created by IntelliJ IDEA.
  User: Lamb
  Date: 2021/11/21
  Time: 23:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
    /* init */
    * {
        font-family: 'Poppins', sans-serif;
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: none;
        border: none;
        text-decoration: none;
        text-transform: capitalize;
        -webkit-transition: .2s linear;
        transition: .2s linear;
    }

    html {
        font-size: 62.5%;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }
    /* header css start*/
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #3F3D56;
        -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .header .logo {
        padding: 0 1rem;
    }

    .header .logo span{
        vertical-align:top;
    }

    .navbar ul{
        display: flex;
    }

    .navbar ul li{
        width: 128px;
        list-style: none;
        text-align:center;
    }
    .navbar ul li a {
        width: 128px;
        line-height: 45px;
        font-size: 1.7rem;
        color: white;
        font-weight: bold;
        text-decoration: none;
    }
    .navbar ul li a:hover{
        color: #009933;
    }

    /* 二级菜单样式 */
    .navbar ul li ul{
        position: absolute;
        display: none;
        width: 128px;
        line-height: 45px;
    }

    .navbar ul li ul li{
        background-color: #3F3D56;
    }
    /* 悬浮展开二级菜单 */
    .navbar ul li ul li a:hover{
        color: white;
    }
    .navbar ul li ul li:hover{
        background-color: #009933;
    }

    .navbar ul li:hover ul{
        display: block;
    }
    /* header css end */

    @media screen and (max-width:1000px) {
        .header{
            flex-direction: column;
        }
    }
</style>
<header>
    <div class="header" id="cate">
        <a href="./index.jsp" class="logo">
            <img src="./image/logo.png" alt="logo">
        </a>
        <nav class="navbar" style="margin-bottom: 0px;">
            <ul>
                <li><a href="jump?page=admin.jsp">新闻公告管理</a></li>
                <li><a href="jump?page=adminUser.jsp">人员管理</a></li>
                <li><a href="./index.jsp">前端首页</a></li>
            </ul>
        </nav>
    </div>
</header>


